
<template>
	<div class="treBox">
		<div class="search-check">
			
			<div class="check">
				<p>问题分类：</p>
				<div class="check-label">
					<button @click="checkbg($event)" class="active" ref="checkall">全部</button>
					<button @click="checkbg($event)" v-for="tab in checks" class="no-active" ref="check">{{tab.item}}</button>
			
				</div>
			</div>
		   <div class="search">
			   	<div class="bg-search">
			   		<i v-on:click="iconSearch()" class="el-icon-search"></i>
			   		<input class="input-search" ref="searchtext" type="text" />
			   	</div>
			   	
		   </div>
		</div>
		<div class="tre-content">
		    <ul class="tre-content-list">
		    	<li v-for="ques in questions">
		    		<p class="tre-question">
		    			{{ques[0]}}
		    		</p>
		    		<p class="tre-auth">
		    			{{ques[1]}}
		    		</p>
		    	</li>
		    	
		    </ul>
			<div class="tre-divi-page">
				<el-pagination
				  @current-change="QueCurrentChange"
				  :current-page="currentPage"
				  background
				  layout="prev, pager, next"
				  :page-size="9"
				  :total="allpage">
				</el-pagination>
				{{msg}}
			</div>
		</div>
			
	</div>
</template>
<script>

		export default{
		name:'BtreaBox',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				
				 msg:'222',
				 Active:false,
				 checks:[
				  
				   {item:'课程'},
				   {item:'就业'},
				   {item:'时间'},
				   {item:'老师'},
				   {item:'学费'}
				 ],
				 allpage:'',
				 questions:[],
				 page:1,
				 kind:''
				}
			 
		},
		methods:{
	    	swipS(){
	    		let self = this;
	    		this.msg = '';
	    		
					this.$http({
						method:'get',
						url:'/Questions/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded'
						},
						params:{
							Kind:'全部',
							Page:self.page,
							Content:''
						}
					}).then((response)=>{
							self.questions = response.data[0];
							self.allpage = response.data[1];
						
					})
	    	},
	    	iconSearch(){
	    		let Page = this.currentPage;
	    		let self = this;
	    		let contr = this.$refs.searchtext.value;
	    	
	    		
	    			this.$http({
					method:'get',
					url:'/Questions/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:contr,
						Kind:self.kind,
						Page:self.page
					}
				}).then((response)=>{
			       self.questions = response.data[0];
			       self.allpage = response.data[1];
			       self.currentPage = 1;
				})
	    	},
	    	checkbg(event){
	    		
	    		for(let i=0;i<this.$refs.check.length;i++){
	    		 this.$refs.check[i].className='no-active'
	    		}
	    		this.$refs.checkall.className = 'no-active'
	    		event.target.className = 'active';
	    		let Page = this.currentPage;
	    		let self = this;
	    		let contr = this.$refs.searchtext.value;
	    	
	    		this.kind = event.target.innerHTML;
	    			this.$http({
					method:'get',
					url:'/Questions/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Content:contr,
						Kind:self.kind,
						Page:self.page
					}
				}).then((response)=>{
			       self.questions = response.data[0];
			       self.allpage = response.data[1];
			       self.currentPage = 1;
				})
	    	},
	    	QueCurrentChange(val){
	    		this.currentPage = val;
	    		this.page = this.currentPage;
	    		let self = this;
	    	    let contr = this.$refs.searchtext.value;
	    		console.log(this.currentPage)
	    		if(this.kind == ''){
	    			this.kind = '全部';
	    		}
	    		
	    		this.$http({
					method:'get',
					url:'/Questions/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Kind:self.kind,
						Page:self.page,
						Content:contr
					}
				}).then((response)=>{
			       self.questions = response.data[0];
			       self.allpage = response.data[1];
				})
	    	}
        }
		
	}
</script>

<style>
	button:focus{
		outline: none;
	}
	.el-pagination button{
		height: 20px;
		line-height: 20px;
	}
	.book .el-pagination.is-background .el-pager li{
		min-height: 18px!important;
	}
	.el-pagination.is-background .el-pager li{
		min-width: 14px;
	}
	.el-pager li{
		height: 18px;
		line-height: 18px;
	}
	 .tre-more-vadio{
    	background: #e79c28;
    	border-radius: 15px 15px;
    	color: white;
    	border: none;
    	width: 180px;
    	height: 28px;
    	font-size: 12px;
    	margin-bottom: 20px;
    }
	.check-label{
		
		position: relative;
		top: -23px;
		margin-left: 68px;
	}
	.treBox .tre-question,.tre-auth{
		height: 90px;
		overflow: hidden;
	}
	.active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white;
	}
	.no-active{
		background: #f0f0f0;
		color: black;
	}
	.el-paginatio{
		font-weight: normal!important;
	}
	.treBox .tre-divi-page{
		width: 100%;
		height: 50px;
		text-align: center;
	}
	.tre-auth{
		text-align: left;
	}
	.treBox .tre-question{
		color: gray;
		text-align: left;
	}
	.check p{
		margin: 0;
		text-align: left;
	}
	.treBox{
		text-align: center;
		width: 100%;
		background: #f7f5f6;
		border: solid 1px #f7f5f6;
		position: relative;
		top: 80px;
	}
	.treBox .tre-content{
		display: inline-block;
		width: 80%;
		min-height: 300px;
	}
	.treBox .tre-content-list{
		list-style: none;
		padding: 0;
		min-height: 400px;
		font-size: 12px;
		min-height: 200px;
	}
	.treBox .tre-content-list li{
		
		min-height: 111px;
		background: white;
	    margin-top: 15px;
	    padding: 10px;
	    padding-bottom: 0;
	    box-shadow: 2px 2px 5px #e6e4e5;
	}
	.treBox .check{
	  width: 100%;
	  display: inline-block;
	}
	
	.treBox .search{
		width: 100%;
		text-align: right;
		
	}
	.treBox .bg-search{
		height: 30px;
		width:100%;
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		padding-left:0!important ;
	}
	.treBox .bg-search input{
		border: none;
		border-radius: 3px 3px;
		position: relative;
		right: 2px;
		height: 24px;
		top: 2px;
		width: 88%;
	}
	.treBox  .bg-search i{
	 	color: white;
	 	position: relative;
	 	right: 5px;
	 	top: 2px;
	 }
	.treBox .check span{
		font-size: 14px;
		color: #676566;
	}
	
	.treBox .search-check{
		margin-top: 40px;
		width: 80%;
		height: 30px;
		display: inline-block;
		margin-bottom: 20px;
	}
	.treBox .search-check div{
		display: inline-block;
	}
	
	.treBox .check button{
		border: none;
		font-size: 12px;
		width: 68px;
		margin-right: 5px;
		height: 27px;
		margin-bottom: 10px;
		background:#eae8e9 ;
		
	}
	
	
	
</style>